<template>
	<div id="" class="full">
		<div id="" class="returnHome">
			<div id="svgbox" class="svg" @click="returnHome()">
				<svg t="1654156292264" class="icon" viewBox="0 0 1536 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="3229" width="200" height="200">
					<path
						d="M227.52 443.072h1248.64a59.904 59.904 0 0 1 0 119.744H227.456l321.792 321.792c24.256 24.256 24.96 63.36 1.536 88.32a59.008 59.008 0 0 1-85.12 1.28L44.8 548.224a64 64 0 0 1 0.256-90.24l416-416.064a59.264 59.264 0 1 1 83.84 83.84L227.52 443.072z"
						p-id="3230" fill="#2c2c2c"></path>
				</svg>
			</div>

		</div>
		<div id="" class="loginContain">
			<div id="" class="formLogin" :class="loginToggle">
				<h1>登录</h1>
				<input type="text" name="" id="" v-model="username" @input="changeUsername(username)"
					placeholder="请输入账号" />
				<input type="text" name="" id="" v-model="password" @input="changePassword(password)"
					placeholder="请输入密码" />
				<span id="tip" class="tip">{{tip}}</span>
				<button type="button" class="loginButton" @click="changeLogin()">登录</button>
			</div>
			<div id="" class="qrCode" @click="toLogin()" :class="loginToggle">

				<svg t="1654141581498" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="2228" width="200" height="200">
					<path
						d="M597.333333 597.333333h85.333334v-85.333333h85.333333v128h-85.333333v42.666667h-85.333334v-42.666667h-85.333333v-128h85.333333v85.333333z m-384-85.333333h256v256H213.333333v-256z m85.333334 85.333333v85.333334h85.333333v-85.333334H298.666667zM213.333333 213.333333h256v256H213.333333V213.333333z m85.333334 85.333334v85.333333h85.333333V298.666667H298.666667z m213.333333-85.333334h256v256h-256V213.333333z m85.333333 85.333334v85.333333h85.333334V298.666667h-85.333334z m85.333334 384h85.333333v85.333333h-85.333333v-85.333333z m-170.666667 0h85.333333v85.333333h-85.333333v-85.333333z"
						fill="#2c2c2c" p-id="2229"></path>
				</svg>
				<span>二维码登录</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "login",
		data() {
			return {
				loginToggle: "",
				username: "",
				password: "",
				tip: "",
				flag: 0
			}
		},
		methods: {
			//返回首页
			returnHome(){
				this.$router.push("/")
			},
			
			// 用户名检测
			changeUsername(value) {
				if (value == "") {
					this.tip = "用户名不能为空"
					this.flag = 0
				} else {
					this.tip = ""
					this.flag = 1
				}
			},
			//密码检测
			changePassword(value) {
				if (value == "") {
					this.tip = "密码不能为空"
					this.flag = 0
				} else {
					this.tip = ""
					this.flag = 1
				}
			},
			//登录验证
			changeLogin() {
				this.changeUsername(this.username)
				this.changePassword(this.password)
				if (this.flag == 1) {
					if (this.username == "vue123456" && this.password == "123456") {
						this.tip = ""
						console.log("登录成功")
						this.$store.commit('setState', this.username)
						this.$router.push("/")
					} else {
						this.tip = "用户名或者密码错误"
						console.log("用户名或者密码错误")
					}
				}
			},
			// 切换登录方式
			toLogin() {
				this.loginToggle = this.loginToggle == "" ? "active" : ""
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	* {
		margin: 0;
		padding: 0;
	}

	.full {
		position: relative;
		width: 100%;
		height: 400px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow: hidden;

		// 返回首页
		.returnHome {
			position: relative;
			width: 100%;
			height: 30px;
			top: 20px;
			left: 0;
			margin-bottom: 50px;
			z-index: 99;

			.svg {
				width: 50px;
				
				svg {
					position: relative;
					width: 50px;
					height: 20px;
					left: -0%;
				}
			}

		}

		.loginContain {
			position: relative;
			width: 90%;
			height: 800px;
			overflow: hidden;

			.formLogin {
				position: relative;
				left: 0%;
				top: 8%;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				transition: 1s;

				h1 {
					margin-bottom: 20px;
				}

				input {
					width: 90%;
					height: 50px;
					border: none;
					border-radius: 14px;
					outline: none;
					margin-top: 20px;
					padding-left: 10px;
					box-sizing: border-box;
					background-color: #f5f7f8;
				}

				.loginButton {
					position: relative;
					margin-top: 20px;
					width: 170px;
					height: 40px;
					border: none;
					background-color: #ced1d6;
					border-radius: 14px;
				}
			}

			.formLogin.active {
				left: 100%;
			}

			.qrCode {
				position: absolute;
				background-color: white;
				width: 50px;
				height: 50px;
				bottom: 14%;
				left: 20px;
				border-radius: 50px;
				box-sizing: border-box;
				transition: 1s;

				svg {
					width: 100%;
					height: 100%;
					transition: 1s;
				}

			}

			.qrCode.active {
				// top: 20%;
				bottom: 20%;
				left: 20%;
				width: 200px;
				height: 200px;

				svg {
					position: relative;
					left: 6px;
					top: 6px;
					margin: auto;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
